
<!-- 供应商减碳编辑业务实现-->
<template>
  <div class="app-container">
	<div style="margin-right: 50px;">
	  <breadcrumb id="breadcrumb-container" class="breadcrumb-container"/>
      <lxsh-common-table-tool-box :pageInfo="pageInfo"></lxsh-common-table-tool-box>
      <lxsh-common-search-condition :queryParam="queryParam" :searchConditionList="searchConditionList">
        <template v-slot:toolButton>
          <el-button class="filter-item" @click="handleSearch">搜索</el-button>
          <el-button class="filter-item" @click="handleReset">重置</el-button>
        </template>
      </lxsh-common-search-condition>
      <!-- 列表 start -->
      <vxe-grid ref="tableListRef" v-bind="gridOptions" @sort-change="handleSortChange" @page-change="handlePageChange" :loading="loading" :height="tableHeight" >
      <!-- 可用按钮 start -->
      <!-- 可用按钮 end -->
        <!-- 操作列模板 start -->
        <template #operate="{ row }">
        <vxe-button type="text"  @click="handleUpdate(row)" v-permission="['cer:supplierImpro:update']"><span class="default-button-font-color">编辑</span></vxe-button>
        <span class="default-button-font-color" v-permission="['cer:supplierImpro:update','cer:supplierImpro:deleteByLogicBatch']">|</span>  
        <el-popconfirm title="确定删除当前数据吗？" @confirm="handleDelete(row)">
            <template #reference>
                <vxe-button type="text" v-permission="['cer:supplierImpro:deleteByLogicBatch']"><span class="default-button-font-color">删除</span></vxe-button>
            </template>
        </el-popconfirm>
        </template>
        <!-- 操作列模板 end -->
      </vxe-grid>
      <!-- 列表 end -->
	</div>
    <!--右侧按钮工具栏start-->
    <div class="table-right-tool-bar">
      <el-col style="margin-top: 30px;"></el-col>
      <el-col style="margin-top: 30px;text-align: center;" class="button-icon" v-permission="['cer:supplierImpro:update']">
        <i class="button-icon iconfont icon-xinzeng" @click="handleCreate"></i>
      </el-col>
      <el-col style="margin-top: 30px;text-align: center;" v-permission="['cer:supplierImpro:deleteByLogicBatch']">
        <i class="button-icon iconfont icon-shanchu" icon="el-icon-delete" @click="handleDeleteBatch"></i>
      </el-col>
      <el-col style="margin-top: 30px;text-align: center;" >
        <el-upload
          v-model:file-list="fileList"
          class="upload-demo"
          :action="url"
          multiple
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :before-remove="beforeRemove"
          :on-exceed="handleExceed"
          :accept="'application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'"
          :before-upload="beforeUpload"
          :headers="myHeader"
          :show-file-list="false"
          :on-success="handleSuccess"
          :on-error="handleError"
        >
          <el-button type="text"><i class="button-icon iconfont icon-upload"></i></el-button>
        </el-upload>
      </el-col>
      <el-col style="margin-top: 30px;text-align: center;" >

        <el-button type="text"  @click="exportExcel"><i class="button-icon iconfont icon-download"></i></el-button>
      </el-col>
    </div>
    <!--右侧按钮工具栏end-->
    <!-- 编辑组件 start-->
    <cer-supplier-impro-edit @editProcessSuccess="editProcessSuccess" :pageInfo="pageInfo" :isEditFormVisible="isEditFormVisible" :functionDistinguish="editFunctionType" v-if="isEditFormVisible"></cer-supplier-impro-edit>
    <!-- 编辑组件 end-->
  </div>
</template>
<script lang="ts" setup>
  import CerSupplierImproEdit from './cer-supplier-impro-edit.vue'
  import { hooksForCommonTable} from 'hhlt-vue/src/components/Lxsh/Common/hooksForCommonTable'
  import { ref, reactive, toRefs, onMounted, Ref } from "vue"
  import { VxeGridInstance, VXETable } from 'vxe-table';
  import cerSupplierImproApi from 'lxsh-cer-web-pc/src/api/cer/cer/cerSupplierImproApi'
  import { CerSupplierImpro}from 'lxsh-cer-web-pc/src/model/cer/cer/supplier-impro/cer-supplier-impro'
  import { getToken } from 'hhlt-vue/src/utils/session/sessionUtils';
  import { systemUtils} from 'hhlt-core/utils'
  import { requestContextPath } from 'lxsh-cer-web-pc/src/constants'
  import { IExecuteData } from 'hhlt-core/src/model/base/resultModel';
  import { MessageBox } from 'hhlt-vue/src/components/Lxsh/Common/Message/MessageBox';
  
  //获取grid实例
  const tableListRef:Ref<VxeGridInstance | undefined> = ref<VxeGridInstance>()
  //初始化hooks
  const {commonData,gridOptions,handleSortChange,handlePageChange,handleSearch,handleReset,handleDelete,handleUpdate,tableHeight,editProcessSuccess,handleCreate,handleDeleteBatch} = hooksForCommonTable<CerSupplierImpro>(tableListRef)  
  //设置
  commonData.pageInfo = {
    systemCode:"cer",
    pageCode:"cerSupplierImpro",
    functionCode:"getListByPager",
    title:"供应商减碳",
    params:{
      id:undefined
    }
  }
  //返回vue界面需要使用到的data
  const { loading,isEditFormVisible,editFunctionType,searchConditionList,queryParam,pageInfo} = toRefs(commonData)

  let url = systemUtils.getContextPath<typeof requestContextPath>(requestContextPath, "cer") + "/cer/supplierImpro/importExcel";
    let myHeader = {
    Authorization:getToken()
  }
  const fileList = ref<UploadUserFile[]>([])

  const beforeUpload = () => {

    loading.value = true;
  }
  const handleSuccess = (result: IExecuteData<String>) => {
    
    loading.value = false;
    if(result.success){

      handleSearch();
    } else {

      MessageBox.error(result.msg)
    }
    
  }
  const exportExcel = () => {

    loading.value = false;
    cerSupplierImproApi.exportExcel(queryParam.value,"供应商减碳",(result: IExecuteData<String>) => {

      if(result.success){

        loading.value=false
      }
    })
  }
</script>
